<template>
  <div class="recommend">
    <div class="recommend-container">
      <ScrollView ref="scrollView">
        <div>
          <Banner :banners="banners"></Banner>
          <Personalized :personalized="personalized" :subTitle="'推荐歌单'" @select="fatherSelectItem"
                        :type="'personalized'"></Personalized>
          <Personalized :personalized="albums" :subTitle="'最新专辑'" @select="fatherSelectItem"
                        :type="'album'"></Personalized>
          <Song-list :newSongs="newSongs" :subTitle="'最新音乐'" class="songList"></Song-list>
        </div>
      </ScrollView>
    </div>
    <!--    添加动画-->
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import {getBanner, getPersonalized, getNewAlbum, getNewSong} from "../api/index"
import Banner from "../components/Recommend/Banner"
import Personalized from "../components/Recommend/Personalized"
import SongList from "../components/Recommend/SongList"
import ScrollView from "../components/ScrollView"
import MetaInfo from '../../vue.meta.info'


export default {
  name: "Recommend",
  metaInfo:MetaInfo.recommend,

  components: {
    Banner,
    Personalized,
    SongList,
    ScrollView
  },
  data() {
    return {
      banners: [],
      personalized: [],
      albums: [],
      newSongs: []
    }
  },
  created() {
    getBanner()
        .then((data) => {
          // console.log(data);
          if (data.code === 200) {
            this.banners = data.banners;
            // console.log(this.banners);
          }
        })
        .catch((err) => {
          console.log(err);
        })
    getPersonalized()
        .then((data) => {
          if (data.code === 200) {
            // console.log(data.result);
            this.personalized = data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        })
    getNewAlbum()
        .then((data) => {
          if (data.code === 200) {
            // console.log(data.albums.splice(0,6));
            this.albums = data.albums.splice(0, 6);
          }
        })
        .catch((err) => {
          console.log(err);
        })
    getNewSong()
        .then((data) => {
          if (data.code === 200) {
            // console.log(data.result);
            // this.newSongs = data.result;
            let list = [];
            data.result.forEach((value) => {
              let obj = {}
              obj.id = value.id
              obj.name = value.name
              obj.picUrl = value.song.album.picUrl
              let singer = ''
              for (let i = 0; i < value.song['artists'].length; i++) {
                if (i === 0) {
                  singer = value.song['artists'][i].name
                } else {
                  singer += ' - ' + value.song['artists'][i].name
                }
              }
              obj.singer = singer
              list.push(obj)
            })
            this.newSongs = list
            //重新加载页面高度
            this.$refs.scrollView.refresh(1000);
          }
        })
        .catch((err) => {
          console.log(err);
        })
  },
  methods: {
    fatherSelectItem(id, type) {
      this.$router.push(`recommend/detail/${id}/${type}`)
    }
  }
}
</script>

<style scoped lang="scss">
.recommend {
  position: fixed;
  top: 184px;
  bottom: 0;
  left: 0;
  right: 0;

  .recommend-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.fade-enter {
  transform: translateX(100%);
}

.fade-enter-to {
  transform: translateX(0%);
}

.fade-enter-active {
  transition: transform 0.5s;
}

.fade-leave {
  transform: translateX(0%);
}

.fade-leave-to {
  transform: translateX(100%);
}

.fade-leave-active {
  transition: transform 0.5s;
}

</style>
